<style type="text/css">
/* 博客园页首Html代码 */
body {
    background: #98C17B;
    background-size: 100% 100%;
    background-attachment: fixed;
}
input[type="button"].btn_my_zzk {
  width: 60px;
}

#home {
  border-top-right-radius: 0;
}
#blogTitle .title {
    position: relative;
    background: none;
}
.portrait {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
    background: white url('https://www.cnblogs.com/images/cnblogs_com/yangcx666/1576526/t_picture.png') no-repeat left center;
    background-size: contain;
   transition: all 0.8s;
   -moz-transition: all 0.8s; /* Firefox 4 */
   -webkit-transition: all 0.8s; /* Safari 和 Chrome */
   -o-transition: all 0.8s;
}

.headermaintitle:hover .portrait {
   -moz-transform:scale(1.2,1.2);
   -webkit-transform:scale(1.2,1.2);
   -o-transform:scale(1.2,1.2);
   transform:scale(1.2,1.2);
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #55895B;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #55895B;
}

::selection {
    color: white;
    background: #018ee8;
}
#topics a:hover {
    padding: 1px 3px 1px 3px;;
    text-decoration: none;
    color: #018ee8;
    border-radius: none;
    background-color: transparent;
}

.postTitle {
    padding-left: 0;
    background: none;
}

.subtitle {
    padding-left: 0;
}

#blogTitle {
   padding-bottom: 0;
}

#nav_q,#nav_ing,#nav_newpost {
   display:none !important;
}

#sideBar {
    border-top-width: 1px !important;
}

#navigator {
    margin-bottom: 0;
}

#sideBarMain {
    margin: 0;
    padding-right: 20px;
    padding-left: 5px;
}

.catListTitle {
    border-top-color: #CECECE;
    border-right-color: #CECECE;
    border-bottom-color: #CECECE;
}

#green_channel {
    width: auto;
}

#tbCommentBody {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

</style>


<style>
	/*以下锚点*/
#sideToolbar {
	position: fixed;
	bottom: -12px;
	right: 25px;
	width: 250px;
	height: 440px
}
#sideCatalog{
	background-color:#fff;
	padding-bottom:10px;
	border-radius:5px;
}
#sideCatalog-sidebar {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #eaeaea;
	border-color: -moz-use-text-color #eaeaea;
	border-image: none;
	border-left: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	border-style: none solid;
	border-width: 0 1px;
	height: 353px;
	left: 5px;
	position: absolute;
	top: 0;
	width: 0
}
#sideCatalog-catalog {
	height: 325px;
	padding-top: 18px;
	overflow-x: hidden;
	overflow-y: scroll;
	padding-left: 23px;
	position: relative
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
	cursor: pointer;
	top: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
	bottom: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll 0 -199px transparent;
	height: 10px;
	left: -5px;
	overflow: hidden;
	position: absolute;
	width: 10px
}
#sideCatalog li {
	margin: 0px;
	padding: 4px 7px;
	text-align: left;
	position: relative
}
#sideCatalog li: hover {
	background-color: #f5f5f5
}
#sideCatalog-catalog ul .active {
	background-color: #f5f5f5
}
#sideCatalog-catalog .active a {
	color: #519cea
}
#sideCatalog-catalog a: hover {
	color: #519cea
}
#sideCatalog span: first-child {
	color: #999;
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	padding-right: 5px
}
#sideCatalog li.h2Offset {
	padding-left: 45px;
	text-indent: -25px
}
#sideCatalog li.h3Offset {
	padding-left: 90px;
	text-indent: -50px
}
#sideCatalog a {
	text-decoration: none;
	color: #555;
	font-weight: bold
}
.sideCatalog-dot {
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") repeat scroll 0 -222px transparent;
	cursor: pointer;
	font-size: 12px;
	height: 10px;
	left: -10px;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	top: 4px;
	width: 6px
}
#sideCatalog .highlight .sideCatalog-dot {
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll -271px -38px transparent;
	height: 13px;
	left: -23px;
	top: 3px;
	width: 18px
}
#sideCatalogBtn {
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	display: block;
	height: 45px;
	margin-bottom: 5px;
	margin-left: 5px;
	position: relative;
	width: 45px;
	margin-top: 10px;
	outline: 0
}
#sideCatalogBtn:hover {	
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll -154px 0 transparent;
	
}

#sideToolbar-up {
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent;
	border-radius: 2px;
	display: block;
	height: 45px;
	margin-left: 5px;
	width: 45px;
	outline: 0
}
#sideToolbar-up:hover {
	background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent
}
#div_digg{
	z-index: 999;
}
/*以上是锚点*/
/*以下是返回顶部*/

#gotop{
background: url("https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent !important;
width: 45px;
height: 45px;
overflow: hidden;
position: fixed;
right: 166px;
bottom: 20px;
cursor: pointer;
display:none;
z-index: 999;
}

#gotop:hover{
background: url(https://images.cnblogs.com/cnblogs_com/yangcx666/1576526/o_o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent !important;
}

#sideToolbar {
    position: fixed;
    bottom: -12px;
    right: 50px;
    width: 280px;
    height: 440px;
}

#gotop {    
    right: 220px;   
	bottom: 15px;
}

#sideCatalog {
    border-top: 5px solid green;
}

</style>


<script>
//以下是锚点JS
var a = $(document);
a.ready(function() {
  var b = $('body'),
    d = 'sideToolbar',
    e = 'sideCatalog',
    f = 'sideCatalog-catalog',
    g = 'sideCatalogBtn',
    h = 'sideToolbar-up',
    i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',
    j = '',
    k = 200,
    l = 0,
    m = 0,
    n = 0,
    //限制存在个数，如数量过多，则只显示h2，不显示h3
    //o, p = 13,
    o, p = 100,
    q = true,
    r = true,
    s = b;
  if(s.length === 0) {
    return
  };
  b.append(i);
  //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方
  //o = s.find(':header');
  o = $('#cnblogs_post_body').find(':header')
  if(o.length > p) {
    r = false;
    var t = s.find('h2');
    var u = s.find('h3');
    if(t.length + u.length > p) {
      q = false
    }
  };
  o.each(function(t) {
    var u = $(this),
      v = u[0];

    var title = u.text();
    var text = u.text();

    u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
    //if (!u.attr('id')) {
    //    u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
    //};
    if(v.localName === 'h2') {
      l++;
      m = 0;
      if(text.length > 14) text = text.substr(0, 20) + "...";
      j += '<li><span>' + l + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
    } else if(v.localName === 'h3') {
      m++;
      n = 0;
      if(q) {
        if(text.length > 12) text = text.substr(0, 16) + "...";
        j += '<li class="h2Offset"><span>' + l + '.' + m + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
      }
    } else if(v.localName === 'h4') {
      n++;
      if(r) {
        j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';
      }
    }
  });
  $('#' + f + '>ul').html(j);
  b.data('spy', 'scroll');
  b.data('target', '.sideCatalogBg');
  $('body').scrollspy({
    target: '.sideCatalogBg'
  });
  $sideCatelog = $('#' + e);
  $('#' + g).on('click', function() {
    if($(this).hasClass('sideCatalogBtnDisable')) {
      $sideCatelog.css('visibility', 'hidden')
    } else {
      $sideCatelog.css('visibility', 'visible')
    };
    $(this).toggleClass('sideCatalogBtnDisable')
  });
  $('#' + h).on('click', function() {
    $("html,body").animate({
      scrollTop: 0
    }, 500)
  });
  $sideToolbar = $('#' + d);

  //通过判断评论框是否存在显示索引目录
  var commentDiv = $("#blog-comments-placeholder");

  a.on('scroll', function() {
    //评论框存在才调用方法
    if(commentDiv.length > 0) {
      var t = a.scrollTop();
      if(t > k) {
        $sideToolbar.css('display', 'block');
        $('#gotop').show()
      } else {
        $sideToolbar.css('display', 'none')
        $('#gotop').hide()
      }
    }
  })
});
//以上是锚点JS
//以下是返回顶部JS
$(function() {
  $('body').append('<div id="gotop" onclick="goTop();"></div>');
});

function goTop(u, t, r) {
  var scrollActivate = !0;
  if(scrollActivate) {
    u = u || 0.1;
    t = t || 16;
    var s = 0,
      q = 0,
      o = 0,
      p = 0,
      n = 0,
      j = 0;
    document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
    document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
    n = window.scrollX || 0;
    j = window.scrollY || 0;
    s = Math.max(s, Math.max(o, n));
    q = Math.max(q, Math.max(p, j));
    p = 1 + u;
    window.scrollTo(Math.floor(s / p), Math.floor(q / p));
    0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r()
  } else {
    scrollActivate = !0
  }
}
//以上是返回顶部JS
</script>

<script src="https://files.cnblogs.com/files/yangcx666/bootstrap.min.js"></script>
